<template>
  <div class="t-pa-md">
    <t-form style="max-width: 600px margin-bottom: 16px">
      <t-radio-group
        label="选择模式"
        labelPosition="left"
        :inline="true"
        v-model="selection"
        :options="[
          { label: '禁用', value: 'none' },
          { label: '多选', value: 'multiple' },
          { label: '单选', value: 'single' },
        ]"
      />
      <div class="tr-label-prefix-wraper tr-label-prefix-wraper-left">
        <span class="tr-label-prefix">
          <span class="t-label"> 自动过滤行 </span>
        </span>
        <t-checkbox
          v-model="showAutoFilterRow"
          @click="
            () => {
              dataGrid1.showAutoFilterRow = !dataGrid1.showAutoFilterRow
            }
          "
        ></t-checkbox>
      </div>
      <div class="tr-label-prefix-wraper tr-label-prefix-wraper-left">
        <span class="tr-label-prefix">
          <span class="t-label"> 允许排序 </span>
        </span>
        <t-checkbox label="" v-model="allowSort"></t-checkbox>
      </div>
    </t-form>
    <t-data-grid
      ref="dataGrid1"
      :selection="selection"
      fillMode="custom"
      height="300px"
      :rows="rows"
      :optColumns="optColumns"
      :allowSort="allowSort"
      :showRowNumber="showRowNumber"
      :showAutoFilterRow="showAutoFilterRow"
      :row-key="rowKey"
      :loading="loading"
      :pageIndex="pagination.page"
      :pageSize="pagination.rowsPerPage"
      :rowsNumber="pagination.rowsNumber"
      @request="onRequest"
    ></t-data-grid>
  </div>
</template>

<script>
import options from './options'
import data from './db.json'

import { onMounted, ref } from 'vue'
export default {
  setup() {
    const rows = ref([])

    const pagination = ref({
      page: 1,
      rowsPerPage: 3,
      rowsNumber: 2001
    })

    const loading = ref(false)

    function mockQuery(props) {
      /** Start OnRequest Script */
      const { page, rowsPerPage, rowsNumber } = props.pagination
      const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage

      const startRow = (page - 1) * rowsPerPage

      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            rows: data.users.slice(startRow, startRow + fetchCount),
            rowsNumber: data.users.length,
            page,
            rowsPerPage
          })
        }, 1000)
      })

      /** END OnRequest Script */
    }

    function onRequest (props) {
      loading.value = true
      mockQuery(props).then(response => {
        rows.value = response.rows
        pagination.value.rowsNumber = response.rowsNumber
        pagination.value.page = response.page
        pagination.value.rowsPerPage = response.rowsPerPage
        loading.value = false
      })
    }

    const Widget = {}
    onMounted(() => {
      Widget.dataGrid1 = vm.dataGrid1.value
      Widget.dataGrid1.query()
    })

    const vm = {
      dataGrid1: ref(),
      pagination,
      allowSort: ref(true),
      showRowNumber: ref(true),
      showAutoFilterRow: ref(true),
      selection: ref('none'),
      selected: ref([]),
      rowKey: options.idField,
      optColumns: [
        {
          ID: 'ID',
          dataField: 'ID',
          caption: '主键ID',
          dataType: 'String',
          isShow: false
        },
        {
          ID: 'Code',
          dataField: 'Code',
          caption: '编号',
          dataType: 'string',
          isShow: true,
          fixedColumn: 'left',
          linkFormat:
            "debuggeralert(Widget.dataGrid1.CellClickInfo)alert('asdf')",
          enumDisp: {
            showMode: 'icon',
            textAlign: 'left',
            valMapping: true,
            enumRanges: [
              {
                val: '0',
                text: '2',
                icon: '',
                color: 'rgba(181, 132, 132, 1)',
                iconColor: 'rgba(89,204,178,1.00)',
                bgColor: '',
                UUID: '1d58f31a-8345-ccc7-be71-d459999c6320'
              }
            ]
          }
        },
        {
          ID: 'Name',
          dataField: 'Name',
          caption: '名称',
          width: '200px',
          dataType: 'string',
          isShow: true,
          linkFormat: "alert('linkFormat')"
        },
        {
          fixedColumn: 'left',
          ID: 'Creator',
          dataField: 'Creator',
          caption: '创建人',
          dataType: 'string',
          isShow: true
        },
        {
          ID: 'CreatorName',
          dataField: 'CreatorName',
          caption: '创建人姓名',
          dataType: 'String',
          isShow: false
        },
        {
          ID: 'CreateTime',
          dataField: 'CreateTime',
          caption: '创建时间',
          dataType: 'DateTime',
          isShow: false
        },
        {
          ID: 'LastModifier',
          dataField: 'LastModifier',
          caption: '最后修改人',
          dataType: 'string',
          isShow: true
        },
        {
          ID: 'LastModifierName',
          dataField: 'LastModifierName',
          caption: '最后修改人姓名',
          dataType: 'String',
          isShow: false
        },
        {
          ID: 'LastModifyTime',
          dataField: 'LastModifyTime',
          caption: '最后修改时间',
          dataType: 'Timestamp',
          isShow: false
        },
        {
          ID: 'Date',
          dataField: 'Date',
          caption: '日期',
          dataType: 'date',
          isShow: true,
          linkFormat: '',
          enumDisp: {},
          hintConf: {},
          expanded: true,
          name: 'Date',
          format: 'yyyy-MM-dd'
        },
        {
          ID: 'DateTime',
          dataField: 'DateTime',
          caption: '日期时间',
          dataType: 'datetime',
          isShow: true,
          dataFormat: {
            DateFormat: '',
            FormatType: 'DateTime'
          }
        },
        {
          ID: 'Time',
          dataField: 'Time',
          caption: '时间',
          dataType: 'datetime',
          isShow: true,
          format: 'HH:mm:ss'
        },
        {
          ID: 'Boolean',
          dataField: 'Boolean',
          caption: '布尔',
          dataType: 'boolean',
          isShow: true
        },
        {
          ID: 'Int',
          dataField: 'Int',
          caption: 'Int',
          dataType: 'number',
          isShow: true,
          dataFormat: {
            DiscountFixedRule: '1',
            FormatType: 'Discount'
          }
        },
        {
          // fixedColumn: 'right',
          ID: 'Float',
          dataField: 'Float',
          caption: 'Float',
          dataType: 'number',
          isShow: true,
          dataFormat: {
            DecimalDigit: 4,
            ThousandsSeparator: false,
            Demo: '',
            FormatType: 'Number'
          }
        }
      ],
      rows,
      loading,
      onRequest
    }
    return vm
  }
}
</script>
